<template>
	<a-modal
		v-model:open="visible"
		title="VIP即将到期提醒"
		:footer="null"
		:closable="false"
		:mask-closable="false"
		width="520px"
		centered
	>
		<div class="vip-expiry-reminder">
			<div class="reminder-icon">
				<ExclamationCircleOutlined style="font-size: 48px; color: #ff9800" />
			</div>

			<div class="reminder-content">
				<h3>您的VIP会员即将到期</h3>
				<p class="expiry-info">
					<span v-if="remainingDays > 0">
						您的VIP会员将在 <strong>{{ remainingDays }}天</strong> 后到期
					</span>
					<span v-else-if="remainingDays === 0"> 您的VIP会员将在 <strong>今天</strong> 到期 </span>
					<span v-else>
						您的VIP会员已过期 <strong>{{ Math.abs(remainingDays) }}天</strong>
					</span>
				</p>
				<p class="renewal-tip">为了不影响您的使用体验，建议您及时续费或生成新的兑换码。</p>
			</div>

			<div class="action-buttons">
				<a-space direction="vertical" size="small" style="width: 100%">
					<a-button type="primary" size="large" @click="goToVipPage" block> 前往VIP页面续费 </a-button>
					<a-button type="default" @click="goToRedeemPage" block> 使用兑换码续费 </a-button>
					<a-button type="text" @click="remindLater" style="color: #999"> 稍后提醒 </a-button>
				</a-space>
			</div>
		</div>
	</a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'

interface Props {
	open: boolean
	remainingDays: number
}

interface Emits {
	(e: 'update:open', value: boolean): void
	(e: 'remind-later'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const router = useRouter()

const visible = ref(false)

// 监听props变化
watch(
	() => props.open,
	(newVal) => {
		visible.value = newVal
	},
	{ immediate: true }
)

// 监听visible变化
watch(visible, (newVal) => {
	emit('update:open', newVal)
})

// 前往VIP页面
const goToVipPage = () => {
	router.push('/user/vip')
	visible.value = false
}

// 前往兑换页面
const goToRedeemPage = () => {
	// 如果有独立的兑换页面，跳转到兑换页面
	// 如果兑换功能在VIP页面，也跳转到VIP页面
	router.push('/user/vip')
	visible.value = false
}

// 稍后提醒
const remindLater = () => {
	emit('remind-later')
	visible.value = false
}
</script>

<style scoped lang="scss">
.vip-expiry-reminder {
	text-align: center;
	padding: 20px 0;

	.reminder-icon {
		margin-bottom: 20px;
	}

	.reminder-content {
		margin-bottom: 30px;

		h3 {
			font-size: 20px;
			font-weight: 600;
			color: #333;
			margin-bottom: 16px;
		}

		.expiry-info {
			font-size: 16px;
			color: #666;
			margin-bottom: 12px;
			line-height: 1.5;

			strong {
				color: #ff4d4f;
				font-weight: 600;
			}
		}

		.renewal-tip {
			font-size: 14px;
			color: #999;
			line-height: 1.5;
		}
	}

	.action-buttons {
		:deep(.ant-btn) {
			height: 44px;
			font-size: 16px;
			font-weight: 500;
		}

		:deep(.ant-btn-primary) {
			background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
			border: none;
			box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);

			&:hover {
				box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
				transform: translateY(-1px);
			}
		}

		:deep(.ant-btn-default) {
			border-color: #d9d9d9;
			color: #666;

			&:hover {
				border-color: #1890ff;
				color: #1890ff;
			}
		}
	}
}
</style>
